<template>
  <div class="bg">
    <!-- 背景 -->
    <div class="contain">
      <div class="header">
        <img :src="loginImgUrl" />
        <h3>{{titleName}}</h3>
      </div>

      <!-- 文本框 -->
      <div class="text-content">
        <div class="account">
          <div class="img_account">
            <img src="../../static/img/account.png" />
          </div>
          <van-field v-model="username"
                     clearable
                     placeholder="请输入账号" />
        </div>

        <!-- 输入密码 -->
        <div class="code">
          <div class="img_code">
            <img src="../../static/img/code.png" />
          </div>
          <van-field v-model="password"
                     clearable
                     placeholder="请输入密码"
                     type="password" />
        </div>
      </div>

      <!-- 登录按钮 -->
      <van-button type="primary"
                  class="btn"
                  @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
import login from '@/api/login'
import { Toast } from "vant";
export default {
  name: 'login',
  data () {
    return {
      loginImgUrl: require('../../static/img/account.png'),
      titleName: '市场管理系统',
      username: '',
      password: '',
      params: {
        userName: '',
        password: ''
      }
    };
  },
  methods: {
    onClickLeft () {
      Toast("返回");
    },
    login () {
      if (this.username !== '' && this.password !== '') {
        this.params.userName = this.username
        this.params.password = this.password
        login.login(this.params)
        //this.$router.push('/')
      } else {
        Toast("请输入用户名或密码");
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../../static/img/bg_img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.8;
}
.contain {
  width: 100%;
  height: 500px;
  margin: auto;
}
.header {
  text-align: center;
  margin: 4rem;
}
.header img {
  width: 5rem;
  height: 5rem;
  margin-top: 1rem;
  margin: 1rem;
}
.header h3 {
  font-size: 1.5rem;
  color: rgb(66, 98, 242);
}
.text-content {
  width: 100vw;
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .img_account,
  .img_code {
    height: 44px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #eee;
  }
  .account,
  .code {
    display: flex;
    width: 90%;
    margin-bottom: 25px;
    line-height: 30px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    img {
      width: 30px;
      height: 30px;
      background-color: white;
      line-height: 30px;
    }
  }
}
.btn {
  width: 90%;
  border-radius: 0.25rem;
  line-height: 0.25rem;
  font-size: 1rem;
  background: rgb(66, 98, 242);
  position: absolute;
  left: 0;
  top: 380px;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>